<template>
  <el-dialog v-model="visible" :title="detailObject.flowName" width="500" :before-close="handleClose">
    <span>{{ detailObject.do }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="danger" @click="deleteNode">删除节点</el-button>
        <el-button type="primary" @click="ok">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, defineProps, watchEffect, defineEmits } from 'vue'
const visible = ref(false)

const props = defineProps<{
  digVisible: boolean,
  detailObject: any,
  graph: any
}>()

const emit = defineEmits(['close'])

watchEffect(() => {
  if (props.digVisible) {
    visible.value = props.digVisible
  }
})


/* 取消 */
const handleClose = () => {
  //传参回去告知取消
  visible.value = false
  const index = props.detailObject["id"].slice(props.detailObject['id'].indexOf("-")+1, props.detailObject['id'].length)-1
  console.log(index,'index')
  const obj = {
    status: false,
    index:Number(index)
  }
  emit('close', obj)
}

/* 确定 */
const ok = () => {
  console.log('2222')
}

/* 删除节点 */
const deleteNode = () => {
  const graphData = props.graph.getData();
  let target = []
  graphData.nodes.forEach((ele: any, index: any) => {
    if (ele['id'] == props.detailObject['id']) {
      target.push(ele.id)
      graphData.nodes.forEach((el: any, ind: any) => {
        if (ind > index) {
          target.push(el.id)
        }
      })
    }
  });
  props.graph.removeNodeData(target);
  props.graph.render()
  handleClose()
}


</script>

<style lang='scss' scoped></style>
